<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue</title>
    <script src="./lib/vue.js"></script>
  </head>
  <body>
    <h1>你好</h1>
    <div id="app">
      {{ message }}
      <p >{{rawHtml}}</p>
      <!-- v-once 只渲染初始值 -->
      <p V-html="rawHtml" v-once></p>
      <!-- v-text 不作为html代码解析 -->
      <p v-text="rawHtml"></p>
      <!-- v-model双向绑定 输入框的值改变影响username 反过来也是 -->
       <input type="text" name="" id="" v-model="username">
<!-- .number拿到的是number类型，否则为字符串 -->
       <input type="number" name="" id="" v-model.number="pnum"> 
       <input type="text" name="" id="" v-model.lazy="password">
      <p>{{password}}</p>
    </div>
   <div id="test">
    <!-- 第一种添加事件 参数不能自己控制 -->
    <button v-on:click="btnClick" >按钮</button>
    <!-- 第二种添加事件 参数可以自己控制 -->
    <!-- $event 点击按钮时 的 事件对象-->
    <button v-on:click="regClick(2,'aa',$event)" >按</button>
    <button @click="login" >登录</button>
    <p>{{username}}</p>
   </div>
    <script>
      var app = new Vue({
        el:'#app',//元素
        data(){
          return{
             message:'Hello Vue',
             rawHtml:"<h2>下大雨</h2>",
             username:'aa',
             pnum:10,
             password:10,
          }
         
        }
      })
     app.rawHtml = "这个";
     var test = new Vue({
      el:'#test',
      data(){
        return{
          username:'sansan'
        }
      },
      methods:{
        btnClick(evt){
          // alert('点击了按钮') 指向当前的vue实例

          console.log(this)
          this.username = "aaa";
          //事件对象
          console.log(evt);
          // 事件源
          console.log(evt.target);
          // 直接触发事件的元素 
          console.log(evt.currentTarget);
        },
        regClick(id,name,evt){
          console.log(id);
          console.log(name);
          console.log(evt);
        },
        login(){
          console.log("迪纳基");
        }
      }
     }) 
    </script>
  </body>
</html>
